<template>
  <view class="main-view">
    <eui-section title="基本用法" type="line">
      <view class="example">
        <!-- 基础用法，不包含校验规则 -->
        <eui-form :items="items" v-model="mainData" ref="custom" :rules="rules" :labelWidth="150">
        </eui-form>
        <view class="btn-view">
          <eui-button type="primary" @buttonClick="submit('custom')" title="提交" />
        </view>
      </view>
    </eui-section>
  </view>
</template>

<route lang="json">
{
"style": {
"navigationBarTitleText": "Form"
}
}
</route>

<script>
export default {
  data() {
    return {
      items2: [],
      items: [
        {
          label: "姓名",
          prop: "c_name",
          type: "input",
          required: true,
          labelPosition: "left",
          element: {
            maxlength: 200,
            placeholder: "请输入姓名"
          },
          showBottomLine: true,
        },
        {
          label: "性别",
          prop: "c_sex",
          type: "radio",
          required: false,
          labelPosition: "left",
          element: {
            maxlength: 200,
            placeholder: "请输入自我介绍"
          },
          showBottomLine: true,
          checkboxList: [
            {
              text: "男",
              value: 0
            },
            {
              text: "女",
              value: 1
            },
            {
              text: "保密",
              value: 2
            }
          ],
        },
        {
          label: "兴趣爱好",
          prop: "c_hobby",
          type: "checkbox",
          required: true,
          labelPosition: "left",
          element: {
            maxlength: 200,
            placeholder: "请输入自我介绍"
          },
          showBottomLine: true,
          checkboxList: [
            {
              text: '跑步',
              value: 0
            }, {
              text: '游泳',
              value: 1
            }, {
              text: '绘画',
              value: 2
            }, {
              text: '足球',
              value: 3
            }, {
              text: '篮球',
              value: 4
            }, {
              text: '其他',
              value: 5
            }
          ]
        },
        {
          label: "自我介绍",
          prop: "c_memo",
          type: "textarea",
          required: false,
          labelPosition: "left",
          element: {
            maxlength: 200,
            placeholder: "请输入自我介绍"
          },
          showBottomLine: false,
        },
      ],
      mainData: {
        c_name: "",
        c_memo: "",
        c_sex: "",
        c_hobby: "",
        c_datetime: "",
      },
      // 校验规则
      rules: {
        c_name: {
          rules: [{
            required: true,
            errorMessage: '姓名不能为空'
          }]
        },
        c_memo: {
          rules: [{
            required: true,
            errorMessage: '自我介绍不能为空'
          }]
        },
      },
      // 自定义表单数据
      customFormData: {
        name: '',
        age: '',
        hobby: []
      },
      // 自定义表单校验规则
      customRules: {
        name: {
          rules: [{
            required: true,
            errorMessage: '姓名不能为空'
          }]
        },
        age: {
          rules: [{
            required: true,
            errorMessage: '年龄不能为空'
          }]
        },
        hobby: {
          rules: [{
            format: 'array'
          },
            {
              validateFunction: function(rule, value, data, callback) {
                if (value.length < 2) {
                  callback('请至少勾选两个兴趣爱好')
                }
                return true
              }
            }
          ]
        }
      },
    }
  },
  computed: {
    // 处理表单排列切换
    alignment() {
      if (this.current === 0) return 'left'
      if (this.current === 1) return 'top'
      return 'left'
    }
  },
  onLoad() {},
  onReady() {
    // 设置自定义表单校验规则，必须在节点渲染完毕后执行
    // this.$refs.custom.setRules(this.rules)
  },
  methods: {
    onClickItem(e) {
      console.log(e);
      this.current = e.currentIndex
    },
    add() {
      this.dynamicLists.push({
        label: '域名',
        rules: [{
          'required': true,
          errorMessage: '域名项必填'
        }],
        id: Date.now()
      })
    },
    del(id) {
      let index = this.dynamicLists.findIndex(v => v.id === id)
      this.dynamicLists.splice(index, 1)
    },
    submit(ref) {
      console.log('=====submit=====');
      console.log('====ref: ', ref);
      console.log('====this.$refs[ref]: ', this.$refs[ref]);
      let list = this.items;
      console.log('===list: ', list);
      console.log('===mainData: ', this.mainData);
      for (let index = 0; index < list.length; index++) {
        let item = list[index];
        console.log('======this.mainData[item.prop]: ', this.mainData[item.prop]);
        if (item.required && !this.mainData[item.prop]) {
          uni.showToast({
            title: `${item.label}不能为空`,
            icon: 'none',
            mask: true
          })
          return;
        }
      }
      this.$refs[ref].validate().then(res => {
        console.log('success', res);
        uni.showToast({
          title: `成功`
        })
      }).catch(err => {
        console.log('err', err);
      })
    },
  }
}
</script>

<style lang="scss">

.main-view {
  width: 100%;
  height: 100vh;
  background: #FFFFFF;
}

.title-view {
  width: 100%;
  height: auto;
  background: #FFFFFF;
  display: flex;
  padding: 30rpx;
  box-sizing: border-box;
}

.example {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  margin-left: 10px;
}

.btn-view {
  width: 100%;
  height: 150rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>
